<template>
  <!-- 缓存-->
  <div>

    <el-form inline>
      <el-form-item>
        <el-input style="background-color: #f5f7f9;width: 260px;height: 40px;" v-model="Mdform"
                  :prefix-icon="Search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" icon="Search" @click="SearchList">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-card shadow="hover" style="width: 100%;font-size: 15px" v-for="item in  recordList" :key="item.id">
      <el-row>
        <el-col :span="5">
          <a style="cursor: pointer" :href="`https://www.dance365.com/detail/video?momentId=${item.momentId}`">
            <div class="grid-content ep-bg-purple">
              <img class="posi" src="../../../../../src/assets/1.png">
              <el-image :src="item.cover" style="height: 105px;width: 180px"></el-image>
            </div>
          </a>
        </el-col>
        <el-col :span="19">
          <el-col>
            <div class="grid-content ep-bg-purple-light">
              <div style="margin-bottom: 50px">
                <a>{{ item.title }}</a>
              </div>
              <div style="font-size: 10px">
                视频
              </div>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import {getList, souSuo} from "@/api/yym.js"
import {Search} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

const img = ref('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666263537&t=c11376b1437e8b8c2931040b82ffac92')
const Mdform = ref('')
const recordList = ref([])
//初始化数据
onMounted(() => {
  //挂载后 获取数据 进行响应
  initDataRecordList();
})
//初始化数据的方法
const initDataRecordList = async () => {
  try {
    const res = await getList()
    console.log(res)
    // ElMessage.success('请求历史记录成功')  // recordList.value = res.content;
    recordList.value = res.content;
    // console.log('content', res.content)
    // console.log('recordList.value', recordList.value[0])
    // console.log('recordList.value', recordList.value[1])
    // console.log('recordList.value.Target',recordList.value.)
  } catch (e) {
    // ElMessage.error("请求历史记录失败！");
    console.error(e.message)
  }
}
//搜索
const SearchList = async () => {
  try {
    const res = await souSuo(Mdform.value)
    console.log( '搜索recordList.value ',recordList.value )
    await initDataRecordList()
    recordList.value = res.content; //先掉初始化接口 初始化接口会给recordList赋值 在重新给recordList赋上现在搜索的返回值
    Mdform.value = ''
    // ElMessage.success("调取搜索接口成功")
  } catch (e) {
    // console.log(e)
    // ElMessage.error("调取搜索接口失败")
  }
}


</script>

<style scoped>
.posi {
  /*width: 10px;*/
  height: 30px;
  width: 30px;
  position: absolute;
  bottom: 15px;
  left: 10px;
  z-index: 999;
}
</style>
